<template>
    <div class="process-management">
        <div class="top">
            <div class="search-container">
                <Select
                    v-model="selectedCategory"
                    @on-change="shiftCategoryDate(selectedCategory)"
                    style="width:90px;textAlign:center;"
                >
                    <Option
                        v-for="item in flowCategoryList"
                        :value="item.id"
                        :key="item.name"
                    >{{ item.name }}</Option>
                </Select>
                <Input
                    v-model="searchFloName"
                    placeholder="请输入流程名称"
                    clearable
                    style="width: 210px"
                    @on-change="searchFlow"
                />
                <Select
                    v-model="selectedLabels"
                    placeholder="请选择标签"
                    multiple
                    :max-tag-count="1"
                    style="width:200px;margin-left:20px"
                >
                    <Option v-for="item in labelList " :value="item" :key="item">{{ item }}</Option>
                </Select>
                <Select
                    v-model=" selectedFlowState"
                    placeholder="请选择状态"
                    style="width:100px;margin-left:20px"
                >
                    <Option v-for="item in  flowStateList" :value="item" :key="item">{{ item }}</Option>
                </Select>
                <Select
                    v-model="selectedResource"
                    placeholder="请选择资源"
                    style="width:150px;margin-left:20px"
                >
                    <Option v-for="item in resourceList" :value="item" :key="item">{{ item }}</Option>
                </Select>
                <Button type="primary" style="margin-left:20px" @click="setTableData">
                    <Icon type="md-search" style="margin-right:5px" />搜索
                </Button>
            </div>
            <div class="btn-container">
                <Button>sss</Button>
            </div>
        </div>
        <div class="bot">
            <div class="table-content">
                <el-table :data="tableData" v-loading="loading" stripe size="mini" height="100%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="name" label="名称" width="230" />
                    <el-table-column prop="flowState" label="状态" width="120">
                        <template slot-scope="scope">
                            <span
                                class="state-tag"
                                :class="scope.row.flowState.toLowerCase()"
                            >{{ modifyFlowState(scope.row.flowState)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="category" label="类别" width="130" />
                    <el-table-column prop="labels" label="标签" min-width="100px">
                        <template slot-scope="scope">
                            <div
                                class="labels"
                                v-for="val in scope.row.labels"
                                :key="val"
                                :type="'primary'"
                                effect="plain"
                                disable-transitions
                            >
                                <span>{{ val }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="160" />
                    <el-table-column prop="modifyTime" label="修改时间" width="160" />
                    <el-table-column prop="relativeModifyTime" label="相对修改时间" width="120" />
                    <el-table-column prop="description" label="备注" width="180">
                        <template slot-scope="scope">
                            <Tooltip
                                :content="scope.row.description"
                                placement="bottom"
                                max-width="100%"
                                :disabled="scope.row.description.length<14"
                            >
                                <span class="description">{{scope.row.description}}</span>
                            </Tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="340">
                        <template slot-scope="scope">
                            <div class="action-btn-container">
                                <el-button
                                    type="text"
                                    size="mini"
                                    class="action-btn"
                                    @click="showDeployMdal(scope.$index, scope.row)"
                                >
                                    <Icon type="md-build" />部署
                                </el-button>
                                <el-button type="text" size="mini" disabled>
                                    <Icon type="md-power" />取消
                                </el-button>
                                <el-button type="text" size="mini" disabled>
                                    <Icon type="md-close" />终止
                                </el-button>
                                <el-button
                                    type="text"
                                    size="mini"
                                    class="action-btn"
                                    @click="showEditModal(scope.$index, scope.row)"
                                >
                                    <Icon type="md-create" />编辑
                                </el-button>
                                <el-button
                                    type="text"
                                    size="mini"
                                    class="action-btn"
                                    @click="showDeleteModal(scope.$index, scope.row)"
                                >
                                    <Icon type="md-trash" />删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="table-page">
                <suc-page
                    :total="allDateLength"
                    show-total
                    show-sizer
                    :page-size="17"
                    :page-size-opts="[10,17,30,40]"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                ></suc-page>
            </div>
        </div>
        <action-modal :deployMdal.sync="deployMdal" :editModal.sync="editModal" />
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { SucTable, SucTableColumn, SucPage } from "@suc/ui";
import {
    getFlowAll,
    getFlowCategory,
    getFlowPartialData,
    getFlowLabels,
    getResources,
    deleteFlowDate
} from "@/api/getdata";
import ActionModal from "./ActionModal.vue";

@Component({
    components: {
        SucTable,
        SucTableColumn,
        SucPage,
        ActionModal
    }
})
export default class ProcessManagement extends Vue {
    tableData: object[] = [];
    allDateLength: number = 0;
    page: number = 0;
    pageSize: number = 17;
    loading: boolean = true;
    searchFloName: string = "";
    flowCategoryList: any = [
        {
            name: "全部",
            id: "0"
        }
    ];
    selectedCategory: string = "0";
    labelList: any[] = [];
    selectedLabels = "";
    flowStateList: any[] = ["未部署", "创建完成"];
    selectedFlowState: string = "";
    resourceList: any[] = [];
    selectedResource: string = "";
    // showModal: any = {
    //     deployMdal: false,
    //     editModal: false,
    //     deleteModal: false
    // };
    deployMdal: boolean = false;
    editModal: boolean = false;

    // 状态
    get modifyFlowState() {
        return (flowState: string) => {
            switch (flowState) {
                case "FAILED":
                    return "运行失败";
                case "UNDEPLOYED":
                    return "未部署";
                case "CANCELED":
                    return "已取消";
                case "COMPLETED":
                    return "运行成功";
            }
        };
    }

    async mounted() {
        // 获取分类
        this.setflowCategoryList();
        // 获取表格显示数据
        this.setTableData({});
        // 设置流程标签数据
        this.setFlowLabels();
        // 设置资源数据
        this.setResources();
    }

    // 获取所有数据
    async setAllData() {
        // const flowAll = await getFlowAll();
        // flowAll.forEach((item: any) => {
        //     this.allDate.push(item);
        // });
        // console.log(await getFlowPartialData({}));
        // this.setTableData(this.page, this.pageSize, this.searchFloName);
    }

    // 设置页面显示的数据
    async setTableData(obj: any) {
        const {
            page = this.page,
            size = this.pageSize,
            name = this.searchFloName,
            categoryId = this.selectedCategory
        } = obj;
        this.loading = true;
        this.tableData = [];
        const { content, totalElements } = await getFlowPartialData({
            page,
            size,
            name,
            categoryId: categoryId === "0" ? "" : categoryId
        });
        this.allDateLength = totalElements;
        content.forEach((item: any) => {
            this.addTableData(item);
        });
        this.loading = false;
    }

    // 添加表格展示数据
    addTableData(item: any) {
        const {
            name,
            flowState,
            labels,
            createTime,
            modifyTime,
            description,
            categoryId,
            id
        } = item;
        const data = {
            name,
            flowState,
            category: this.getCategory(categoryId),
            labels,
            createTime: this.handleTime(createTime, 0),
            modifyTime: this.handleTime(modifyTime, 0),
            relativeModifyTime: this.handleTime(modifyTime, 1),
            description,
            id
        };

        this.tableData.push(data);
    }

    // 处理时间
    handleTime(time: string, type: number) {
        const [y, t] = time.split("T");
        const tm = t.split(".")[0];
        let date = `${y} ${tm}`;
        if (type) {
            const modifyTime = new Date(date).getTime();
            const nowTime = new Date().getTime();
            const hours = Math.floor((nowTime - modifyTime) / (1000 * 60 * 60));
            date =
                hours >= 24
                    ? `${Math.floor(hours / 24)}天前`
                    : `${hours}小时前`;
        }
        return date;
    }

    // 通过data的categoryId处理类别
    getCategory(categoryId: string) {
        const category = this.flowCategoryList.filter(
            (item: any) => item.id == categoryId
        )[0];
        return category ? category.name : this.flowCategoryList[0].name;
    }

    // 切换分页
    changePage(page: number) {
        page = page - 1;
        this.page = page;
        this.setTableData({ page });
    }

    // 切换分页数据条数
    changePageSize(pageSize: number) {
        this.pageSize = pageSize;
        this.setTableData({ pageSize });
    }

    // 设置类别
    async setflowCategoryList() {
        const result = await getFlowCategory();
        result.forEach(({ name, id }: any) =>
            this.flowCategoryList.push({
                name,
                id
            })
        );
    }

    // 设置标签选择器的数据
    async setFlowLabels() {
        const result = await getFlowLabels();
        result.forEach((name: any) => this.labelList.push(name));
    }

    async setResources() {
        const result = await getResources();
        result.forEach(({ name }: any) => this.resourceList.push(name));
    }

    // 切换分类
    async shiftCategoryDate(categoryId: string) {
        this.setTableData({ page: 0, categoryId });
    }

    // 搜索流程
    searchFlow() {
        this.setTableData({});
    }

    // 显示部署框
    showDeployMdal(index: number, row: any) {
        this.deployMdal = true;
        console.log(index, row);
    }

    // 显示编辑框
    showEditModal(index: number, row: any) {
        this.editModal = true;
        console.log(index, row);
    }

    // 显示删除框
    showDeleteModal(index: number, row: any) {
        this.$Modal.confirm({
            title: "确认删除该流程？",
            onOk: async () => {
                const res = await deleteFlowDate(row.id);
                console.log(res);
                this.$Message.info("删除成功");
                this.setTableData({});
            }
        });
    }
}
</script>

<style lang="scss" scoped>
$top-height: 34px;

.process-management {
    height: 100%;
    padding: 15px;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.15);
    box-shadow: 0 3px 8px 0 rgba(28, 58, 96, 0.15);
    border-radius: 4px;

    .top {
        height: $top-height;
        margin-bottom: 15px;
        .search-container {
            float: left;

            .ivu-select {
                .ivu-select-selection {
                    background-color: #f3f3f3 !important;
                }
            }
        }
        .btn-container {
            float: right;
        }
    }
    .bot {
        height: calc(100% - #{$top-height});
        padding-bottom: 10px;

        .table-content {
            height: calc(100% - #{$top-height});
            padding-bottom: 10px;
            font-size: 12px;
            text-align: center;

            .action-btn-container {
                button:nth-child(1),
                button:nth-child(4),
                button:nth-child(5) {
                    padding: 2px 7px;
                    border-radius: 4px;
                    transition: color 0.2s linear, background-color 0.2s linear,
                        border 0.2s linear, box-shadow 0.2s linear;
                    &:hover {
                        background-color: #fff;
                    }
                }
            }

            .state-tag {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 2px 5px;
                font-size: 14px;
                color: #fff;

                // 运行失败
                &.failed {
                    background: rgb(255, 100, 100);
                }
                // 	未部署
                &.undeployed {
                    background: rgb(45, 183, 245);
                }
                // 运行成功
                &.completed {
                    background: rgb(25, 190, 107);
                }
                // 已取消
                &.canceled {
                    background: rgb(255, 153, 0);
                }
            }

            .labels {
                display: inline-block;
                padding-top: 3px;
                padding-right: 3px;
                height: 27px;
                box-sizing: content-box;

                span {
                    color: #2f54eb !important;
                    border-radius: 4px;
                    line-height: 20px;
                    padding: 5px;
                    border: 1px solid #adc6ff;
                }
            }

            .description {
                display: inline-block;
                width: 107px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .table-page {
            float: right;
        }
    }
}
</style>
